<script setup lang="ts">
import { ref, computed } from 'vue'
import { getAllMovieByCinema, getUnJoinMovieByCinema, addCinemaMovie, delCinemaMovie } from '../../../../api/movie';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex'

const store = useStore()

const activeName = ref('done')
const cinemaId = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId
const userId = JSON.parse(window.sessionStorage.getItem("currentUser")!).userId
const movieList = ref<IHotMovie[]>([])
const unJoinmovieList = ref<IHotMovie[]>([])
const allTypes = ref<any>([])

interface IHotMovie {
    movieCover: string
    movieDesc: string
    movieId: number
    movieName: string
    movieScore: number
    movieScoreNum: number
    movieTypeId: number
    movieView: number
    movieDuring: number
}

store.dispatch('type/getAllTypes').then((res: any) => {
    allTypes.value = res.data
})

const getMovieListApi = () => {
    getAllMovieByCinema({ cinemaId: cinemaId }).then((res: any) => {
        if (res.code == 200) {
            movieList.value = res.data
            console.log("电影管理 -> 获得已加入电影信息", movieList.value);
        } else {
            ElMessage.error("获取电影信息失败")
        }
    })

    getUnJoinMovieByCinema({ cinemaId: cinemaId }).then((res: any) => {
        if (res.code == 200) {
            unJoinmovieList.value = res.data
            console.log("电影管理 -> 获得未加入电影信息", unJoinmovieList.value);
        } else {
            ElMessage.error("获取未加入电影信息失败")
        }

    })
}

getMovieListApi()

const search = ref('')
const filterTableData = computed(() =>
    movieList.value.filter(
        (data: IHotMovie) =>
            !search.value ||
            data.movieName.toLowerCase().includes(search.value.toLowerCase())
    )
)

const filterTableData2 = computed(() =>
    unJoinmovieList.value.filter(
        (data: IHotMovie) =>
            !search.value ||
            data.movieName.toLowerCase().includes(search.value.toLowerCase())
    )
)


const handleAdd = (index: number, row: IHotMovie) => {
    addCinemaMovie({ cinemaId: cinemaId, movieId: row.movieId, userId: userId }).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success("添加成功")
            getMovieListApi()
        } else {
            ElMessage.error("添加失败")
        }
    })
}
const handleDelete = (index: number, row: IHotMovie) => {
    delCinemaMovie({ cinemaId: cinemaId, movieId: row.movieId }).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success("删除成功")
            getMovieListApi()
        } else {
            ElMessage.error("删除失败")
        }
    })
}

</script>

<template>
    <div class="movie-manage">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="已加入" name="done">
                <el-table :data="filterTableData" style="width: 100%">
                    <el-table-column label="电影封面" prop="date">
                        <template #default="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.movieCover" fit="cover" />
                        </template>
                    </el-table-column>
                    <el-table-column label="电影名称" prop="movieName" />
                    <el-table-column label="电影介绍" prop="movieDesc" />
                    <el-table-column label="电影类型" prop="movieTypeId">
                        <template #default="scope">
                           {{allTypes[scope.row.movieTypeId - 1].type}}
                        </template>
                    </el-table-column>
                    <el-table-column label="电影时长" prop="movieDuring" />
                    <el-table-column align="right">
                        <template #header>
                            <el-input v-model="search" size="small" placeholder="Type to search" />
                        </template>
                        <template #default="scope">
                            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="未加入" name="tobe">
                <el-table :data="filterTableData2" style="width: 100%">
                    <el-table-column label="电影封面" prop="date">
                        <template #default="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.movieCover" fit="cover" />
                        </template>
                    </el-table-column>
                    <el-table-column label="电影名称" prop="movieName" />
                    <el-table-column label="电影介绍" prop="movieDesc" />
                    <el-table-column label="电影类型" prop="movieTypeId">
                        <template #default="scope">
                           {{allTypes[scope.row.movieTypeId - 1].type}}
                        </template>
                    </el-table-column>
                    <el-table-column label="电影时长" prop="movieDuring" />
                    <el-table-column align="right">
                        <template #header>
                            <el-input v-model="search" size="small" placeholder="Type to search" />
                        </template>
                        <template #default="scope">
                            <el-button size="small" @click="handleAdd(scope.$index, scope.row)" type="primary">新增
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped lang="scss">

</style>
